import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      //跟Column竖排 row横排 一样 就是能折行
      //Column竖排  row横排
      // mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴
      // crossAxisAlignment: CrossAxisAlignment.center, //交叉轴
      direction: Axis.vertical,
      runAlignment: WrapAlignment.start, //主轴
      crossAxisAlignment: WrapCrossAlignment.start, //交叉轴
      verticalDirection: VerticalDirection.down, //垂直方向
      spacing: 10.0,
      runSpacing: 10.0,
      children: [
        IconBadge(Icons.pool),
        IconBadge(Icons.beach_access, size: 20.0),
        SizedBox( //单独容器 只能装子组件
          width: 100.0,
          height: 100.0,
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: BorderRadius.circular(10.0)),
            child: IconBadge(
              Icons.airplanemode_active,
              size: 20.0,
            ),
          ),
        ),
        Container(
            width: 100.0,
            height: 100.0,
            decoration: BoxDecoration(
                color: Colors.green, borderRadius: BorderRadius.circular(10.0)),
            child: Stack( //绝对布局
              alignment: Alignment.bottomLeft,
              children: [
                Positioned(
                    right: 20.0,
                    child:
                        Icon(Icons.ac_unit, color: Colors.white, size: 20.0)),
              ],
            )),
        SizedBox(
          width: 100.0,
          height: 100.0,
          child: AspectRatio( //比例布局
            aspectRatio: 1.0 / 1.0,
            child: Container(
              color: Color.fromRGBO(255, 100, 50, 1.0),
            ),
          ),
        ),
        SizedBox(
          width: 100.0,
          height: 100.0,
          child: ConstrainedBox( //限制子元素 大小
              constraints: BoxConstraints(maxWidth: 100.0, minHeight: 100.0),
              child: Container(
                color: Color.fromRGBO(3, 54, 255, 1.0),
              )),
        )
      ],
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size + 60,
      height: size + 60,
      color: const Color.fromRGBO(3, 54, 255, 1.0),
      child: Icon(icon, size: size, color: Colors.white),
    );
  }
}
